<template>
  <div class="wrap">
      <myHead title="充值"></myHead>
      <section>
          <div class="tit">充值金额</div>
          <div class="m_list">
            <p v-for="(x,y) in mList" :class="index==y?'':'seled'" @click="select(y)">{{x}}元</p>
          </div>
          <div class="tit">其他充值金额</div>
          <div class="m_num">
            <input type="text" v-model="money" @blur="int">
          </div>
          <div class="tit">支付方式</div>
          <div class="zf_list">
              <div :class="type[0]?'zf_box':'zf_box zf_boxed'" @click="type=[true,false]">
                <div class="yl"><img :src="type[0]?'../../../static/img/cz001.png':'../../../static/img/cz001ed.png'" alt="" style="width: .23rem;height: .2rem"><p>微信支付<img src="../../../static/img/cz004.png" alt="" style="width: .23rem;height: .12rem;"></p></div>
                <img :src="type[0]?'../../../static/img/cz002.png':'../../../static/img/cz003.png'" alt="">
              </div>
              <div :class="type[1]?'zf_box':'zf_box zf_boxed'" @click="type=[false,true]">
                <div class="yl"><img :src="type[1]?'../../../static/img/yl111.png':'../../../static/img/yl000.png'" alt="" style="width: .23rem;height: .18rem"><p>银联</p></div>
                <img :src="type[1]?'../../../static/img/cz002.png':'../../../static/img/cz003.png'" alt="">
              </div>
          </div>
      </section>
      <footer>
        <p><span>充值金额</span>&ensp;<span style="color: #FF7106;font-size: .18rem">￥{{money}}</span></p>
        <p class="btn">充值</p>
      </footer>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "recharge",
    components:{
      myHead
    },
    data(){
      return {
        money:0,
        type:[true,false],
        index:0,
        indexed:0,
        mList:[5,10,30,50]
      }
    },
    mounted() {
      $('input').blur();
    },
    methods:{
      select(num){
        this.index = num;
        this.indexed = num;
        this.money = this.mList[num];
      },
      int(){

        if (!/^[1-9][0-9]{0,}$/.test(this.money) || !this.money) {
          this.money = 0;
        }
      }
    },
    watch:{
      money(){
        if (this.money != 0){
          this.index = -1;
        }else {
          this.index = this.indexed;
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    padding-top: .5rem;
    min-height: 6.17rem;
  }
  section {
    padding: 0 .15rem;
  }
  .tit {
    height: .5rem;
    line-height: .5rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    margin-bottom: .1rem;
  }
  .m_list {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-around;
    margin-bottom: .1rem;
  }
  .m_list>p {
    width:.7rem;
    height:.41rem;
    background:rgba(255,139,59,1);
    border-radius:.02rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
    text-align: center;
    line-height: .41rem;
  }
  .seled {
    background:rgba(255,118,17,.1) !important;
    color: #333333 !important;
  }

  .m_num {
    margin-bottom: .1rem;
  }
  .m_num>input {
    width: 2rem;
    font-size:.26rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    border: none;
    padding-left: .1rem;
    border-bottom: .01rem solid #F2F2F2;
  }

  .zf_box {
    width:3.35rem;
    height:.55rem;
    box-sizing: border-box;
    border:.02rem solid rgba(255,112,4,1);
    border-radius:.27rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 0 .2rem;
    position: relative;
    justify-content: space-between;
    margin: 0 auto .2rem;
    color: #FF7106;
  }
  .zf_boxed {
    border-color: #E0E0E0;
    color: #666666;
  }
  .zf_box>img:nth-child(1) {
    margin-right: .2rem;
  }

  .zf_box>div:nth-child(1)>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
  }
  .zf_box>img:nth-child(2) {
    width: .16rem;
    height: .16rem;
  }
  .yl>img {
    margin-right: .2rem;
  }

  .yl {
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  footer {
    width: 100%;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    box-shadow:0 0 .1rem 0 rgba(221,93,4,0.1);
    height: .58rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 0 .15rem;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  footer>p:nth-child(1){
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }
  footer>p:nth-child(2) {
    width:.8rem;
    height:.34rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.17rem;
    line-height: .34rem;
    text-align: center;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FFFFFF;
  }
</style>
